<template>
  <!--  -->
  <BaseMainSlot>
    <template v-slot:searchbox>
      <el-collapse v-model="activeName" accordion @change="handleChange">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="select-btns search-btns" @click.stop="changeSelect()">
              <i class="el-icon-circle-check"></i>
              <p>{{ activeName === '1' ? '收起筛选' : '展开筛选' }}</p>
            </div>
          </template>
          <div class="search-btn search-btns" @click.stop="judgeDisease">
            <i class="el-icon-circle-check"></i>
            <p>查询</p>
          </div>

          <div class="select-box-container">
            <div class="select-box-item">
              <span>关联品种：</span>
              <el-select filterable clearable v-model="formData.fishVarietyId" filterable clearable @change="qureyFeaturesTypeManage">
                <el-option v-for="item of FishVarietyList" :key="item.fishVarietyId" :label="item.varietyName"
                  :value="item.fishVarietyId" />
              </el-select>
            </div>
            <div class="select-box-item" v-for="(item, index) of BOList" :key="index">
              <div class="select-box-item-one">
                <span>诊断项名称：</span>
                <el-select filterable clearable v-model="item.diagnosisItemId" filterable clearable
                  @change="qureyDiseaseFeatures($event, index), item.diagnosisItemSymbolNoList = []">
                  <el-option v-for="items of FeaturesTypeManageList" :key="items.diagnosisItemId + 'FeaturesType'"
                    :label="items.mainFeaturesFlag ? items.diagnosisItemName + '（主要特征）' : items.diagnosisItemName + '（辅助特征）'"
                    :value="items.diagnosisItemId" :disabled="disabledList.indexOf(items.diagnosisItemId) !== -1" />
                </el-select>
              </div>
              <div class="select-box-item-three" style="width:400px;">
                <span>选择诊断项症状： </span>
                <el-select filterable clearable v-model="item.diagnosisItemSymbolNoList" clearable multiple :ref="'ref' + index"
                  @change="updateSelected">
                  <el-option class="selectOption" v-for="item of BOList[index].diseaseFeaturesList"
                    :key="item.diagnosisItemSymbolId"
                    :label="item.diagnosisItemSymbolNo + '：' + item.diagnosisItemSymbolDesc"
                    :value="item.diagnosisItemSymbolNo" />
                </el-select>
              </div>
              <div class="select-box-item-son">
                <div v-if="BOList.length !== 1" class="line-click" @click="deleteRow(index, item)"><i
                    class="el-icon-remove-outline"></i></div>
                <div v-if="index === BOList.length - 1" class="line-click" @click="addRow"><i
                    class="el-icon-circle-plus-outline"></i></div>
              </div>
            </div>
          </div>
          <div class="epidemic-database">
            <span class="epidemic-database-star">✮</span>推断原则：A、B、C、F是主要判断特征，只要符合其中1-2条或以上即可推定属于该病；D、E是辅助判断特征。
          </div>
        </el-collapse-item>
      </el-collapse>
    </template>
    <template v-slot:content>
      <div class="section-center">
        <div class="selected-box">
          <span>已选特征:</span>
          <span v-for="(item, index) of formData.diagnosisItemSymbolNoList" :key="index" class="selected-btn">{{ item
          }}</span>
        </div>
        <div class="picture-box">
          <div class="diagnosis" v-for="(item, index) of selectNoList" :key="index">
            <div class="diagnosis-header">
              <span class="diagnosis-header-title">{{ item.diagnosisItemSymbolNo }}</span>
              <el-tooltip class="item" effect="dark" :content="item.diagnosisItemSymbolDesc" placement="top-start">
                <span class="diagnosis-header-desc"> - {{ item.diagnosisItemSymbolDesc }}</span>
              </el-tooltip>
            </div>
            <div class="diagnosis-body">
              <div class="imgBox" style="width: 100%;height: 100%; position: relative;"
                v-if="item.src && item.src.length">
                <el-image style="width: 100%; height: 100%; " :src="item.src[0]" :preview-src-list="item.src">
                </el-image>
                <div
                  style="position: absolute;right: 0;bottom: 0;padding: 5px 10px;background: #047ffb85; color: #ffffff;">
                  共{{
                    item.src.length }}张</div>
              </div>
              <span v-else class="diagnosis-body-empty">暂无图片展示</span>
            </div>
          </div>
        </div>
      </div>

      <div class="section-bottom">
        <div class="result-item" v-for="(item, index) of resultList" :key="index + 'result'">
          <div class="result-item-row">
            <span class="result-item-row-title">推断结果：</span>
            <span class="result-item-row-content" style="color: #0480FB;">{{ item.diseaseName }}</span>
          </div>
          <div class="result-item-row">
            <span class="result-item-row-title">预防方法：</span>
            <span class="result-item-row-content">{{ item.preventionMethod }}</span>
          </div>
          <div class="result-item-row">
            <span class="result-item-row-title">治疗方法：</span>
            <span class="result-item-row-content">{{ item.therapeuticMethod }}</span>
          </div>
          <div class="result-item-row">
            <span class="result-item-row-title">特殊症状描述：</span>
            <span class="result-item-row-content">{{ item.mainSymptoms ? item.mainSymptoms : '无特殊症状描述' }}</span>
          </div>
          <div class="result-item-row">
            <span class="result-item-row-title">疾病可能性：</span>
            <span class="result-item-row-content">{{ item.ratio ? item.ratio + '%' : '--%' }}</span>
          </div>
        </div>
      </div>
    </template>
  </BaseMainSlot>
</template>

<script>
import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination";
import BaseMainSlot from "@/components/BaseMainSlot/kong-new2.vue";
import AddEditDialog from "./components/add-edit-dialog.vue";
import { mymixin } from "@/utils/mixin";
import { mapGetters } from "vuex";

import EpidemicDatabaseQueryApi from "@/api/disease-bank-manage/epidemic-database-query/index";
import FishVarietyApi from "@/api/basic-info-manage/fishVariety/index";
import FeaturesTypeManageApi from "@/api/disease-bank-manage/features-type-manage/index";
import DiseaseFeaturesManageApi from "@/api/disease-bank-manage/disease-features-manage/index";
import DocumentApi from "@/api/document";
import { blobToBase64 } from "@/utils/convert";

export default {
  name: "DiseaseBankManage",
  components: { ActionBar, Pagination, BaseMainSlot, AddEditDialog },
  mixins: [mymixin],
  data () {
    return {
      // 查询条件：
      formData: { diagnosisItemSymbolNoList: [] },
      FishVarietyList: [], // 下拉数据-品种
      FeaturesTypeManageList: [], // 下拉数据-诊断项
      BOList: [{}],
      selectNoList: [],
      resultList: [], // 查询结果
      activeName: '1',
      disabledList: []
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {},
  created () {
    this.qureyFishVariety();
  },
  mounted () { },
  methods: {
    qureyFishVariety () {
      FishVarietyApi.queryByCondition().then(res => {
        this.FishVarietyList = res.data;
      });
    },
    qureyFeaturesTypeManage (e) {
      FeaturesTypeManageApi.queryByCondition({ fishVarietyId: e }).then(res => {
        this.FeaturesTypeManageList = res.data;
      });
    },
    qureyDiseaseFeatures (e, index) {
      this.disabledList = []
      DiseaseFeaturesManageApi.queryByCondition({ diagnosisItemId: e }).then(res => {
        this.$set(this.BOList[index], 'diseaseFeaturesList', res.data)
      });
      this.BOList.forEach(item => {
        this.disabledList.push(item.diagnosisItemId)
      })
    },
    updateSelected (e) {
      this.formData.diagnosisItemSymbolNoList = []
      this.selectNoList = []
      this.BOList.forEach(item => {
        if (item.diagnosisItemSymbolNoList.length) {
          this.formData.diagnosisItemSymbolNoList.push(...item.diagnosisItemSymbolNoList) // 更新需要传给后端的诊断项症状编号
          // 处理《中间图片展示的相关数据》
          this.formData.diagnosisItemSymbolNoList.forEach((diagnosisItem) => {
            item.diseaseFeaturesList.find(featuresItem => {
              if (featuresItem.diagnosisItemSymbolNo === diagnosisItem) {
                this.selectNoList.push(featuresItem)
              }
            })
          })
        }
        // console.log(this.selectNoList, '----');
        // if()
        // this.selectNoList.forEach(item =>{

        // })
      })
      this.selectNoList.forEach(item => {
        this.$set(item, 'src', [])
        if (item.fileIdList && item.fileIdList.length) {
          item.fileIdList.split(',').forEach(async fileId => {
            fileId ? item.src.push('http://119.23.242.86:9090/base/files/download?fileId=' + fileId) : ''
            // await DocumentApi.fileDownload({ fileId: fileId }).then(async res => {
            //   await blobToBase64(res.data).then(imgUrl => {
            //     if (imgUrl) item.src.push(imgUrl)
            //     console.log(this.selectNoList)
            //   })
            // })
          })
        }
      })
    },
    judgeDisease () {
      EpidemicDatabaseQueryApi.judgeDisease(this.formData).then(res => {
        console.log('诊断结果', res);
        const data = res.data;
        if (data) {
          this.resultList = data
        }
      })
    },
    // 点击添加按按钮
    addRow () {
      let list = {};
      console.log(this.FeaturesTypeManageList.length)
      if (!this.formData.fishVarietyId) {
        this.$message.info('请先选择鱼种！')
        return
      }
      if (this.BOList.length < this.FeaturesTypeManageList.length) {
        this.BOList.push(list);
      }
    },
    // 删除改行
    deleteRow (index, item) {
      this.disabledList = []
      this.BOList.splice(index, 1);
      this.BOList.forEach(item => {
        this.disabledList.push(item.diagnosisItemId)
      })
      let id = item.diagnosisItemId
      let symbolList = item.diagnosisItemSymbolNoList
      if (id) {
        this.selectNoList = this.selectNoList.filter((imgData) => {
          return imgData.diagnosisItemId != id
        })
      }
      if (symbolList && symbolList.length) {
        symbolList.forEach(No => {
          this.formData.diagnosisItemSymbolNoList = this.formData.diagnosisItemSymbolNoList.filter(symbol => {
            console.log(symbol)
            return symbol != No
          })
        })
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.select-box-item-three {
  width: 500px !important;

  ::v-deep .el-select {
    width: 300px;
  }
}

.section-center {
  width: 100%;
  padding: 20px;
  background: #FFFFFF;
  border-radius: 5px 5px 5px 5px;

  .selected-box {
    color: black;
    font-size: 16px;
    height: 44px;

    .selected-btn {
      width: 30px;
      height: 30px;
      padding: 4px;
      margin: 0 4px;
      border: 1px solid #00305F;
      background: #3580C9;
      border-radius: 5px 5px 5px 5px;
      color: #fff;
    }
  }

  .picture-box {
    display: flex;
    overflow: auto;

    .diagnosis {
      height: 240px;
      background: #EDF6FF;
      box-shadow: 0px 1px 3px 1px rgba(4, 128, 251, 0.35);
      margin-right: 20px;

      .diagnosis-header {
        padding: 0 10px;
        width: 100%;
        height: 32px;
        padding-left: 6px;
        background: #0480FB;
        color: #fff;
        font-size: 16px;
        display: flex;
        align-items: center;

        &-title {
          font-weight: bold;
        }

        &-desc {
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          white-space: nowrap;
        }
      }

      .diagnosis-body {
        padding: 10px;
        width: 100%;
        height: calc(100% - 32px);
        display: flex;
        justify-content: center;
        align-items: center;

        .imgbox {
          cursor: pointer;
          border: 1px solid #8b8b8b;
        }

        &-empty {
          font-size: 20px;
          // color: #000;
        }

        &-img {
          width: 482px;
          height: 350px;
          object-fit: cover;
        }
      }
    }
  }
}

.section-bottom {
  margin: 16px 0;
  width: 100%;
  padding: 20px;
  background: #FFFFFF;
  border-radius: 5px 5px 5px 5px;

  .result-item {
    width: 100%;
    margin: 10px;
    background: #EBF5FF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 16px;

    &-row {
      margin-bottom: 10px;

      &-title {
        display: inline-block;
        padding-left: 10px;
        height: 100%;
        line-height: 32px;
        background: #0480FB;
        border-radius: 5px;
        color: #fff;
        margin-right: 20px;
      }

      &-content {
        color: #2B2B2B;
      }
    }
  }
}

.line-click {
  // border: 4px solid #4B8BC9;
  background: transparent;
  margin-bottom: 0;
  font-size: 32px;

  .el-icon-circle-plus-outline {
    position: absolute;
    left: 0;
    top: 0;
    color: #4B8BC9;
  }

  .el-icon-remove-outline {
    position: absolute;
    left: 0;
    top: 0;
    color: #4B8BC9;
  }
}

.epidemic-database {
  color: #214d79;
  font-size: 16px;
  font-weight: bolder;

  .epidemic-database-star {
    font-size: 25px;
    font-weight: bolder;
  }
}

.selectOption {
  max-width: 300px;
}
</style>
